<template>
  <div class="news-container">
    <!-- 主内容区 -->
    <div class="main-wrapper">
      <!-- 左侧轮播图 -->
      <div class="image-panel">
        <el-carousel 
          :interval="3000"
          indicator-position="none"
          height="100%"
          class="full-carousel"
        >
          <el-carousel-item 
            v-for="(item,index) in imgItems" 
            :key="index"
            class="carousel-item"
          >
            <img 
              :src="item.image" 
              class="full-image"
            >
          </el-carousel-item>
        </el-carousel>
      </div>
      
      <!-- 右侧内容区 -->
      <div class="content-panel">
        <div class="header-group">
          <div class="action-group">
            <el-menu :default-active="activeIndex" class="el-menu-demo" @select="handleSelect" style="white-space: nowrap;" ellipsis="false">
              <el-menu-item index="1">集团新闻</el-menu-item>
              <el-menu-item index="2">项目动态</el-menu-item>
              <el-menu-item index="3">项目公告</el-menu-item>
              <el-menu-item index="4">媒体报道</el-menu-item>
            </el-menu>
          </div>
          <el-button type="primary" size="small" class="more-btn">更多<el-icon><Plus /></el-icon></el-button>
        </div>

        <!-- 新闻列表 -->
        <div class="news-list">
          <el-card 
            v-for="n in 6" 
            :key="n"
            class="news-card"
            shadow="never"
          >
          <div class="news-content">
              <span class="news-title">新闻标题 {{ n }}</span>
              <span class="news-date">2024-01-{{ n < 10 ? '0'+n : n }}</span>
          </div>
          </el-card>
        </div>
      </div>
    </div>


    <!-- 中间内容区 -->
    <div class="medieum" v-if="subPage === null"> 
      <h1>新闻中心</h1>
      <div class="news-list">
          <el-card 
            v-for="n in 5" 
            :key="n"
            class="news-card"
            shadow="never"
          >
          <div class="news-content">
              <span class="news-title">新闻标题 {{ n }}</span>
              <span class="news-date">2024-01-{{ n < 10 ? '0'+n : n }}</span>
          </div>
          </el-card>
      </div>
    </div>

    <!-- 子页面内容，隐藏默认内容 -->
    <div v-if="subPage !== null" class="sub-page-content">
      <div v-if="subPage === 0">
        <h1>集团新闻</h1>
        <p>这里是集团新闻的内容...</p>
      </div>
      <div v-if="subPage === 1">
        <h1>项目动态</h1>
        <p>这里是项目动态的内容...</p>
      </div>
      <div v-if="subPage === 2">
        <h1>项目公告</h1>
        <p>这里是项目公告的内容...</p>
      </div>
      <div v-if="subPage === 3">
        <h1>媒体报道</h1>
        <p>这里是媒体报道的内容...</p>
      </div>
      <div v-if="subPage === 4">
        <h1>媒体报道</h1>
        <p>这里是媒体报道的内容...</p>
      </div>
    </div>

    <!-- 底部分页 -->
    <div class="pagination-group" v-if="subPage === null">
      <el-pagination
        layout="prev, pager, next"
        :total="50"
        :pager-count="9"
        class="red-pagination"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'

const route = useRoute();
const subPage = ref(null);
const activeIndex = ref('1');

// 处理菜单选择
const handleSelect = (key) => {
  activeIndex.value = key;
  // 触发子菜单选择事件，更新面包屑导航
  window.dispatchEvent(new CustomEvent('setSubMenuIndex', { 
    detail: { 
      path: '/news',
      index: Number(key) - 1
    } 
  }));
}

// 根据URL参数更新子页面
const updateSubPage = () => {
  if (route.query.sub !== undefined) {
    const subIndex = Number(route.query.sub);
    subPage.value = subIndex;
    // 同步更新左侧菜单选中项
    activeIndex.value = (subIndex + 1).toString();
  } else {
    subPage.value = null;
  }
};

// 监听路由变化
watch(() => route.query.sub, updateSubPage);

// 监听子菜单选择事件
const handleSubMenuSelect = (event) => {
  if (event.detail && event.detail.path === '/news') {
    const index = event.detail.index;
    subPage.value = index;
    activeIndex.value = (index + 1).toString();
  }
};

// 页面加载时初始化
onMounted(() => {
  updateSubPage();
  // 监听子菜单选择事件
  window.addEventListener('setSubMenuIndex', handleSubMenuSelect);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('setSubMenuIndex', handleSubMenuSelect);
})

const imgItems = ref([
  {
    image: '/src/assets/images/news1.png',
  },
  {
    image: '/src/assets/images/news2.png',
  },
  {
    image: '/src/assets/images/news3.png',
  }
]);
</script>

<style scoped>
/* 基础容器 */
.news-container {
  width: 1200px;
  min-height: 450px; /* Changed from fixed height to min-height */
  background: white;
  margin: 0 auto;
}

/* 主内容区布局 */
.main-wrapper {
  display: flex;
  gap: 30px;
  flex-wrap: wrap; /* Ensure items wrap if needed */
  height: 450px; 
}

/* 左侧轮播图 (58%) */
.image-panel {
  flex: 0 0 60%;  
}

.red-carousel {
  height: 100%;
}

.carousel-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.placeholder-text {
  font-size: 24px;
  color: #666;
}

.image-panel {
  flex: 0 0 58%;
  height: 100%; /* 与右侧内容区高度一致 */
  position: relative;
  border: 2px solid gray;
  overflow: hidden; /* 防止边缘溢出 */
}

/* 全屏轮播组件 */
.full-carousel {
  width: 100%;
  height: 100%;
}

/* 轮播项样式 */
.carousel-item {
  width: 100%;
  height: 100%;
}

/* 图片填充方案 */
.full-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例填充容器 */
  object-position: center center; /* 居中显示关键内容 */
  display: block; /* 消除图片底部间隙 */
}

/* 右侧内容区 (42%) */
.content-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/*右上角按钮 */
.red-button {
  height: 40px;
  width: 90px;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
}

/* 覆盖Element默认样式 */
.red-button ::v-deep .el-button__content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* 图标文字间距 */
}


/* 标题栏样式 */
.header-group {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 2px solid gold;
  margin-bottom: 20px;
}

/* 按钮组样式 */
.action-group {
  display: flex;
  gap: 0px;
}

.red-button {
  width: 90px;
  height: 30px;
  color: blue !important;
  background: transparent !important;
}

.red-button:hover {
  background: #ffeeee !important;
}

/* 新闻卡片样式 */
.news-list {
  flex: 1;
}

.el-card {
  --el-card-padding: 4px;
}

.news-placeholder {
  padding: 15px;
  color: #444;
}

.news-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.news-title {
  font: 16px/1.5 'Microsoft YaHei';
  color: #333;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.news-date {
  font: 14px/1.5 'Arial';
  color: #666;
  margin-left: auto; /* 确保日期右对齐 */
  padding-left: 20px; /* 保持间距 */
}

.el-menu-demo {
  display: flex;
  flex-wrap: wrap; /* 确保菜单项可以换行 */
  width: auto; /* 确保菜单宽度自适应 */
}

/* 覆盖 Element UI 的默认样式 */
.el-menu-item {
    width: 90px;
}
/* 调整卡片内边距 */
.news-card {
  --el-card-padding: 0 !important;
  margin-bottom: 8px;
  box-sizing: border-box;
  border: 2px solid gray;
  border-radius: 0;
}

/* 分页样式 */
.pagination-group {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.red-pagination ::v-deep .el-pager li {
  border: 2px solid brown;
  border-radius: 50%;
  background: transparent;
  color: blue;
  margin: 0 5px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
}

.red-pagination ::v-deep .el-pager li.active {
  background: blue;
  color: white;
}

.sub-page-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.sub-page-content h1 {
  color: #333;
  margin-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 15px;
}

.sub-page-content p {
  line-height: 1.8;
  color: #666;
  margin-bottom: 15px;
}
</style>